*{
  padding: 0;
  margin: 0;
  user-select: none;
}

body{
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}



@mixin delay($t) {
  animation-delay:$t+'s';
}

.container{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  &::after{
    position: absolute;
    content: '';
    width: 10vw;
    height: 10vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(.05);
    border-radius: 5px;
    filter: blur(10px);
    background-color: #d8d8d8;

  }

  .tunnel{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: transparent;
    transform: translate(-50%,-50%) translateZ(-700px) scale(.2);
    border:5px solid #d8d8d8;
    opacity: 0;
    animation: scale 10s linear infinite;

    @for $i from 1 to 21 {
      &:nth-child(#{$i}){
        animation-delay:#{($i)*.5+'s'};
      }
    }
  }
}


@keyframes scale{
  0%{transform:translate(-50%,-50%) translateZ(-700px) scale(.05);opacity: 0;}
  50%{transform:translate(-50%,-50%) translateZ(0) scale(.5);opacity: .5;}
  100%{transform:translate(-50%,-50%) translateZ(700px) scale(1);opacity: 1;}
}

